<template>
    <div class="login_contain">
        <div class="login_header"></div>
        <div class="login_body"> 
            <div class="login_table">
                <el-form class="login_form" :rules="loginRules" :model="loginForm" status-icon ref="loginForm" label-position="left">
                    <div class="title">米源后台管理系统</div>
                    <el-form-item prop="username">
                    <span class="svg-container">
                        <svg-icon icon-class="user" />
                    </span>
                    <el-input name="username" type="text" v-model="loginForm.username" placeholder="用户名" />
                    </el-form-item>
                     <el-form-item prop="password">
                    <span class="svg-container">
                        <svg-icon icon-class="password" />
                    </span>
                    <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" placeholder="密码" />
                    <!-- <span class='show-pwd' @click='showPwd'>eye</span> -->
                    </el-form-item>
                    <el-checkbox v-model="loginForm.checked"><span class="login_default">记住我，下次自动登陆</span></el-checkbox>
                    <el-button type="primary" :loading="loading" @click.native.prevent="handleLogin">登 录</el-button>
                </el-form>
            </div>
        </div>
        <div class="copyright">版权归米源企业号所有</div>
    </div>
  
</template>
<script>
import { isvalidUsername } from '@/utils/validate'

export default {
    data() {
        const validateUsername = (rule, value, callback) => {
            if (!isvalidUsername(value)) {
                callback(new Error('请输入正确的用户名'))
            } else {
                callback()
            }
            }
            const validatePass = (rule, value, callback) => {
            if (value.length < 5) {
                callback(new Error('密码不能小于5位'))
            } else {
                callback()
            }
        }
        return{
            name:'login',
            loginForm:{
                userName:'',
                password:'',
                checked:false
            },
            loginRules: {
                username: [{ required: true, trigger: 'blur', validator: validateUsername }],
                password: [{ required: true, trigger: 'blur', validator: validatePass }]
            },
            pwdType:'password',
            loading:false
        }
		},
    methods:{
        handleLogin() {
            //this.$router.push({ path: '/' })
            this.$refs.loginForm.validate(valid => {
                if (true) {
                this.loading = true
                this.$store.dispatch('Login', this.loginForm).then((res) => {
                    if(res.data.code === 0) {
                        this.loading = false
                        this.$router.push({ path: '/' })
                    } else if(res.data.code === 300004){
                        debugger
                        this.$message.error('用户名或密码错误');
                        this.loading = false
                    }ß
                        
                }).catch(() => {
                        this.loading = false
                })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        showPwd:function() {
            if(this.pwdType == 'password'){
                this.pwdType = ''
            }else{
                this.pwdType = 'password'
            }
				},
    }
    
    
}
</script>
<style rel="stylesheet/scss" lang="scss" >

    .login_contain{
        height: 100vh;
        .login_body{
            position: relative;
            background: url("../../assets/images/login_bg.png") no-repeat 5% 0px;
            background-repeat:no-repeat;
            background-color:  #27BAAD;
            width: 100%;
            height: 53%;
            top: 50%;
            transform: translateY(-50%);
            .title{
                font-size: 22px;
                color: #FFF;
                text-align: center;
                margin-top: 59px;
                margin-bottom: 38px;
            }
            .login_form{
                position: absolute;
                padding: 50px;
                padding-top: 0;
                padding-bottom: 65px;
                min-width: 243px;
                width:27%;
                background: #30465D;
                right: 15.3%;
                top:0;
                height: 100%;
                .el-input {
                    position: relative;
                    font-size: 14px;
                    height: 40px;
                    width: 80%;
                    line-height: 40px;
                }
                .icon_container{
                    display: inline-block;
                }
                .login_default{
                    display: inline-block;
                    margin-left: 0.6%;
                    font-size: 12px;
                    color: #27BAAD;
                }
                .el-button--primary{
                    width: 100% ;
                    font-size: 16px;
                    background-color: #27BAAD;
                    margin-top: 36px;
                    height: 40px;
                }
                .svg-container{
                    padding: 6px 5px;
                    padding-left: 0px;
                    color:#FFFFFF;
                    vertical-align: middle;
                    width: 20px;
                    display: inline-block;
                }
            }
        }
        .copyright{
                    position: relative;
                    width: 100%;
                    text-align: center;
                    font-size: 12px;
                    color: #888888;
                    bottom: -40%;
                }
    }
</style>

